<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接练习</title>
</head>
<body>
    <!--跳转到内部资源-->
    <a href="p2.html">跳转到今日的第2个页面</a>
    <a href="p4.html">跳转到今日的第4个页面</a>
    <!--跳转到外部资源-->
    <a href="https://www.baidu.com">百度一下</a>
    <!--跳转至本地的图片资源-->
    <a href="2.jpg">即将打开一张图片</a>
    <!--图片链接-->
    <a href="https://www.baidu.com/">
        <img src="2.jpg" alt="" width="300px">
    </a>
    <hr>
    <!--_bank打开一个空白页,_self刷新当前页面-->
    <a href="https://www.baidu.com" target="_blank">百度1</a>
    <a href="https://www.baidu.com" target="_self">百度2</a>
    <!--锚点-->
    <a href="#c1">跳转到第一章</a>
    <a href="#c2">跳转到第二章</a>
    <a href="#c3">跳转到第三章</a>
    <h3 id="c1">第一章</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur culpa cupiditate, fuga illo
        laborum molestias, non officiis possimus quaerat, quas quibusdam ratione reprehenderit repudiandae unde ut vero
        voluptatem! Odit.</p>
    <p>At corporis cumque deserunt enim laborum laudantium non quas similique ullam vel. Animi dolorem, ducimus
        exercitationem illum ipsa, natus nemo numquam possimus quaerat ratione recusandae repellendus sit, totam
        voluptas voluptates?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur culpa cupiditate, fuga illo
        laborum molestias, non officiis possimus quaerat, quas quibusdam ratione reprehenderit repudiandae unde ut vero
        voluptatem! Odit.</p>
    <p>At corporis cumque deserunt enim laborum laudantium non quas similique ullam vel. Animi dolorem, ducimus
        exercitationem illum ipsa, natus nemo numquam possimus quaerat ratione recusandae repellendus sit, totam
        voluptas voluptates?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur culpa cupiditate, fuga illo
        laborum molestias, non officiis possimus quaerat, quas quibusdam ratione reprehenderit repudiandae unde ut vero
        voluptatem! Odit.</p>
    <p>At corporis cumque deserunt enim laborum laudantium non quas similique ullam vel. Animi dolorem, ducimus
        exercitationem illum ipsa, natus nemo numquam possimus quaerat ratione recusandae repellendus sit, totam
        voluptas voluptates?</p>
    <h3 id="c2">第二章</h3>
    <p>Alias enim explicabo in libero officia totam vel? Ab, adipisci aliquam assumenda beatae debitis facilis fugiat
        illo itaque iure libero mollitia nam non praesentium quas quibusdam quod sapiente totam voluptatem!</p>
    <p>Beatae consectetur dolor eligendi exercitationem iste. Ab aspernatur culpa cumque debitis dolore esse fuga hic
        iure, laboriosam magnam molestiae mollitia officia provident quas saepe sapiente similique, sint suscipit totam
        voluptate.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur culpa cupiditate, fuga illo
        laborum molestias, non officiis possimus quaerat, quas quibusdam ratione reprehenderit repudiandae unde ut vero
        voluptatem! Odit.</p>
    <p>At corporis cumque deserunt enim laborum laudantium non quas similique ullam vel. Animi dolorem, ducimus
        exercitationem illum ipsa, natus nemo numquam possimus quaerat ratione recusandae repellendus sit, totam
        voluptas voluptates?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequatur culpa cupiditate, fuga illo
        laborum molestias, non officiis possimus quaerat, quas quibusdam ratione reprehenderit repudiandae unde ut vero
        voluptatem! Odit.</p>
    <p>At corporis cumque deserunt enim laborum laudantium non quas similique ullam vel. Animi dolorem, ducimus
        exercitationem illum ipsa, natus nemo numquam possimus quaerat ratione recusandae repellendus sit, totam
        voluptas voluptates?</p>
    <h3 id="c3">第三章</h3>
    <p>Amet animi assumenda fugiat odit quaerat quis, tenetur voluptatibus? Aperiam beatae ea, eveniet fugiat illo
        itaque labore magni maxime minus non omnis, velit, vitae voluptates! A cupiditate molestias quidem
        recusandae.</p>
    <a href="#">跳转到头部</a>

</body>
</html>